<template>
  <div id="app">
    <router-view />
    <div class="show"></div>
    <x-dialog :show="showGX" style="width:100%">
      <div class="weui-dialog__hd showContent">
        <strong class="weui-dialog__title">更新提醒</strong>
      </div>
      <div class="weui-dialog__bd">
        <divider>同步刷新最新版本</divider>
       
      </div>
      <div class="weui-dialog__ft">
        <a class="weui-dialog__btn weui-dialog__btn_default" v-on:click="ok()"
          >确定</a
        >
        <a
          class="weui-dialog__btn weui-dialog__btn_default"
          v-on:click="cancel()"
          >取消</a
        >
      </div>
    </x-dialog>
    <x-dialog :show="dowload" style="width:100%">
      <div class="weui-dialog__bd">
        <divider>正在下载版本请稍候...</divider>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "App",
  data: function() {
    return {
      userMsg: {},
      showGX: false,
      versionUrl: "",
      dowload: false,
      versionNumber: 0,
    };
  },
  created: function() {
    var that = this;
    document.addEventListener(
      "plusready",
      function() {
        // 在这里调用plus api
        that.getVersion();
      },
      false
    );
  },
  computed: {
    ...mapState({
      upShow: state => state.commonStore.uploadBoolean
    })
  },
  methods: {
    getVersion(number) {
      let versionLocal = localStorage.getItem("version") || '2024070800001'
      this.baseService
        .postForm(this.__ctx + "/rest/TAPPVERSION/getNewestVersion")
        .then(result => {
          if (result.isOk) {
            if (result.data.versionNumber != versionLocal) {
              this.versionNumber = result.data.versionNumber;
              this.versionUrl = result.data.versionUrl;
              this.showGX = true;
            } else {
              if (number == 1) {
                this.versionNumber = result.data.versionNumber;
                this.versionUrl = result.data.versionUrl;
                this.showGX = true;
              }
              this.$store.dispatch("commonStore/setUploadBoolean", false);
            }
          }
        });
    },
    cancel: function() {
      this.showGX = false;
      this.$emit("  ", this.flowParam);
      this.$store.dispatch("commonStore/setUploadBoolean", false);
   
    },
    ok: function() {
      this.dowload = true;
      var url = this.__ctx + "/sys/sysFile/download?fileId=" + this.versionUrl;
      var dtask = plus.downloader.createDownload(url, {}, (d, status) => {
        if (status == 200) {
          // 下载成功，并安装
          localStorage.setItem("version", this.versionNumber);
          this.$store.dispatch("commonStore/setUploadBoolean", false);
          this.dowload = false;
          var path = d.filename;
          plus.runtime.install(
            path,
            {
              force: false
            },
            function() {
              plus.runtime.restart();
            },
            function(e) {}
          );
        } else {
          //下载失败
          alert("Download failed: " + status);
          this.$store.dispatch("commonStore/setUploadBoolean", false);
        }
      });
      dtask.start();
      this.showGX = false;
      this.$store.dispatch("commonStore/setUploadBoolean", false);
    }
  },
  watch: {
    upShow(n, o) {
      if (n == true) {
        this.getVersion(1);
      }
    }
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
@import "./style/buttons.less";
@import "./style/formStyle/documents.less"; //导入发文管理样式

.fwb {
  font-weight: bold;
}

body {
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);

  // .vux-header {
  //   background-color: #fff;
  //   position: fixed;
  //   width: 100%;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   z-index: 100;
  //   padding: 0;

  //   .vux-header-left {
  //     .left-arrow {
  //       &::before {
  //         border-width: 2px 0 0 2px;
  //         border-color: #969799;
  //       }
  //     }
  //   }
  // }
}

.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-image img {
  width: 160px !important;
  height: auto !important;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flex {
  display: flex;
}

.jcc {
  justify-content: center;
}

.jcsb {
  justify-content: space-between;
}

.aic {
  align-items: center;
}
</style>
